<template>
    <div class="flex">
        <div class="title">
            <div class="item" v-for="item in props.title">{{ item }}</div>
        </div>
        <V3Echarts :width="width" :height="height" :options="option" container="container3" />
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import V3Echarts from '@/stories/components/V3Echarts/index.vue'
import { getAssetsFile } from '@/utils'

interface chartDataType {
    name: string
    value: number
    total: number
}

const props = defineProps({
    title: {
        type: Array,
        default: () => {
            return ['设备类型', '健康度', '使用中/总数(个)']
        }
    },
    chartData: {
        type: Array<chartDataType>,
        default: () => {
            return [
                {
                    name: '空调温控板',
                    value: 155,
                    total: 200
                },
                {
                    name: '照明控制器',
                    value: 1200,
                    total: 1500
                },
                {
                    name: '漏水探测器',
                    value: 67,
                    total: 85
                },
                {
                    name: '智能水表',
                    value: 80,
                    total: 80
                },
                {
                    name: '智能电表',
                    value: 80,
                    total: 80
                },
                {
                    name: '空气盒子',
                    value: 67,
                    total: 85
                }
            ]
        }
    },
    width: {
        type: Number,
        default: 1000
    },
    height: {
        type: Number,
        default: 450
    }
})
let option: any = ref({})

const initChart = () => {
    const ydata = []
    for (let i = 0; i < props.chartData.length; i++) {
        ydata.push(props.chartData[i].name)
    }
    const datalength = []
    for (let i = 0; i < props.chartData.length; i++) {
        datalength.push(0)
    }
    const databg = []

    for (let i = 0; i < props.chartData.length; i++) {
        databg.push(100)
    }
    option.value = {
        grid: {
            left: '0%',
            top: '5%',
            right: '43%',
            bottom: '0%',
            containLabel: false
        },
        xAxis: [
            {
                show: false
            },
            {
                show: false
            }
        ],
        yAxis: [
            {
                axisTick: 'none',
                axisLine: 'none',
                offset: 10,
                axisLabel: {
                    color: '#333',
                    fontSize: 14
                },
                data: ydata
            },
            {
                axisTick: 'none',
                axisLine: 'none',
                offset: 90,
                axisLabel: {
                    rich: {
                        //富文本
                        c: {
                            //自定义颜色
                            color: '#ffffff',
                            fontSize: 16,
                            fontFamily: 'SJyunhei',
                            height: 40,
                            align: 'center',
                            padding: [0, 0, 0, -10],
                            backgroundColor: {
                                image: getAssetsFile('基础/data_bg.png')
                            }
                        }
                    },
                    formatter: function (data: any, index: number) {
                        return '{c|' + data + '/' + props.chartData[index].total + '}'
                    }
                },
                data: props.chartData
            },
            {
                axisTick: 'none',
                axisLine: 'none',
                offset: 10,
                axisLabel: {
                    rich: {
                        //富文本
                        a: {
                            //自定义颜色
                            color: '#43bda5',
                            fontSize: 20,
                            fontFamily: 'SJyunhei',
                            height: 40,
                            align: 'center'
                        }
                    },
                    formatter: function (data: any, index: number) {
                        return '{a|' + ((data / props.chartData[index].total) * 100).toFixed(0) + '%}'
                    }
                },
                data: props.chartData
            }
        ],
        series: [
            {
                show: true,
                type: 'bar',
                xAxisIndex: 1, //代表使用第二个X轴刻度!
                barGap: '-100%',
                barWidth: '35%', //统计条宽度
                itemStyle: {
                    borderRadius: 200,
                    color: 'transparent'
                },
                label: {
                    show: true,
                    //label 的position位置可以是top bottom left,right,也可以是固定值
                    //在这里需要上下统一对齐,所以用固定值
                    position: [0, '-150%'],
                    rich: {
                        //富文本
                        white: {
                            //自定义颜色
                            color: '#ffffff',
                            fontSize: 14
                        },
                        start: {
                            height: 20,
                            backgroundColor: {
                                image: getAssetsFile('基础/point_pic.png')
                            }
                        }
                    },
                    formatter: function (data: any) {
                        return '{start|}  {white|' + data.name + '}'
                    }
                },
                data: props.chartData
            },
            {
                name: '条',
                type: 'bar',
                stack: '圆',
                yAxisIndex: 1,
                data: props.chartData.map((item: any) => (item.value / item.total) * 100),
                barWidth: 8,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'transparent' // 0% 处的颜色
                            },
                            {
                                offset: 0.2,
                                color: '#35536b' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#7cc0f5' // 100% 处的颜色
                            }
                        ]
                    },
                    borderRadius: 5
                },
                z: 2
            },
            {
                name: '亮条',
                type: 'scatter',
                stack: '圆',
                yAxisIndex: 1,
                data: datalength,
                label: false,
                symbol: 'square',
                symbolOffset: [0, 0],
                symbolSize: [5, 20],
                zlevel: 2,
                itemStyle: {
                    color: '#fff',
                    opacity: 1
                },
                z: 2
            },
            {
                name: '亮点',
                type: 'scatter',
                stack: '圆',
                yAxisIndex: 1,
                data: datalength,
                label: false,
                symbol: 'square',
                symbolOffset: [0, '-100%'],
                symbolSize: [7, 7],
                zlevel: 2,
                itemStyle: {
                    color: '#fff',
                    opacity: 1,
                    shadowColor: '#fff',
                    shadowBlur: 10
                },
                z: 2
            },
            {
                name: '背景',
                type: 'bar',
                yAxisIndex: 1,
                barGap: '-100%',
                data: databg,
                barWidth: 6,
                itemStyle: {
                    color: 'rgba(43,54,69,0.5)',
                    borderRadius: 5
                },
                z: 0
            }
        ]
    }
}

watch(
    () => props,
    newValue => {
        initChart()
    },
    { immediate: true, deep: true }
)
</script>

<style lang="scss" scoped>
.flex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: v-bind('props.height');
    width: v-bind('props.width');
    .title {
        width: 100%;
        display: flex;
        justify-content: space-around;
        text-align: center;
        height: 32px;
        line-height: 32px;
        margin-bottom: 20px;
        color: #73b2e4;
        background-image: linear-gradient(180deg, rgba(238, 238, 238, 0) 0%, rgba(216, 216, 216, 0.1) 98%, rgba(255, 255, 255, 1) 100%);
        .item {
            font-size: 24px;
        }

        .item:nth-child(1) {
            width: 45%;
        }
    }
}
</style>
